
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
//完成类别管理功能
/* 1.获取后台数据,完成页面基本(静态)的渲染 */

function addBook() {
  axios.get(
    "http://api-breakingnews-web.itheima.net/my/article/cates",
    {headers:{Authorization:localStorage.getItem("token")}}
  ).then(({data:res})=>{
    // console.log(res);
    // debugger
    if(res.status===0){
      $("tbody").empty()    //渲染之前,还是需要清空之前内容的
      res.data.forEach(obj=>{
        let theTr=`<tr>
                    <td>${obj.name}</td>
                    <td>${obj.alias}</td>
                    <td>
                      <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
                      <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                    </td>
                  </tr>`
        $("tbody").append(theTr)          
      })
    }
  })
}
addBook()
/* 2.完成添加功能 */
$(".add").on("click",function () {
 let index= layer.open({
    title: '类别管理',
    content: add_str,
    area: ['500px', '300px'],
    success:function () {
      $("#add_form").on("submit",function (e) {
        e.preventDefault()
        axios.post("http://api-breakingnews-web.itheima.net/my/article/addcates",
        $("#add_form").serialize(),
        {headers:{Authorization:localStorage.getItem("token")}}).then(({data:res})=>{
          console.log(res);
          layer.msg(res.message)
          if(res.status===0) {
            //请求成功,弹出框取消,同时重新渲染页面
            layer.close(index)
            addBook()
          }
        })
      })
    }
  })
})

/* 3.完成删除功能==使用委托 */
$("tbody").on("click",".delete",function () {
  //从新渲染的话,会影响性能,这里可以直接移出对应的tr就可以了
  let id=$(this).attr("myid")
  // console.log(id);
  axios.get(
    `http://api-breakingnews-web.itheima.net/my/article/deletecate/${id}`,
    {headers:{Authorization:localStorage.getItem("token")}}
  ).then(({data:res})=>{
    layer.msg(res.message)
    if(res.status===0){
      $(this).parents("tr").remove()
    }
  })
})

//4.完成编辑功能
/* a.给编辑按钮注册点击事件
b.通过layer插件得到弹框
c.修改信息--确认提交---申请请求 */
$("tbody").on("click",".edit",function () {
  // console.log(1);
  let index= layer.open({
    title: '编辑内别',
    content: edit_str,    //这里的内容放置的是一个form表单元素
    area: ['500px', '300px']
  })
  //这里不使用回调函数
  let name=$(this).attr("data-name")
  let alias=$(this).attr("data-alias")
  let Id=$(this).attr("myid")
  // console.log(name); 第一种赋值方法
  // $(`input[name="name"]`).val(name)
  // $(`input[name="alias"]`).val(alias)
  // $(`input[name="Id"]`).val(Id)
  
  // 第二种方法==给表单中所有带有name属性的输入框赋值
  form.val("edit",{
    name,alias,Id
  })
  //发送Id更新文章分类请求====
 $("#edit_form").on("submit",function (e) {
   e.preventDefault()
  axios.post("http://api-breakingnews-web.itheima.net/my/article/updatecate",
  $("#edit_form").serialize(),  //获取form表单中的数据
  {headers:{Authorization:localStorage.getItem("token")}}).then(({data:res})=>{
    layer.msg(res.message)
    if(res.status===0) {
      // 这里是获取请求成功了,关闭弹框,让后渲染页面  =====>这里为什么没有弹框
      addBook()
    }
  })
 })
})
// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

//完成表单内容验证
const form = layui.form;
form.verify({
    ctname: [
        /^[\u4E00-\u9FA5]+$/,
        "分类名只能是中文"
    ],
    aliname: [
        /^[a-z0-9]+$/,
        "小写英文和数字组成"
    ]
})        

  
  
  
  
